<template>
    <div class="common-layout">
        <el-container>
            <el-aside>
                <Aside class="aside-container" />
            </el-aside>
            <el-container>
                <el-header class="header-container">
                    <Header />
                </el-header>
                <el-main class="main-container">
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import Aside from './layout/Aside.vue';
import Header from './layout/Header.vue';
</script>

<style lang="less" scoped>
.common-layout {
    height: 100%;

    .el-container {
        height: 100%;
    }

    .aside-container {
        height: 100%;
    }

    .el-aside {
        width: auto;
    }

    .el-header {
        padding: 0px;
    }

    .header-container {
        border-bottom: 1px solid #d8dce5;
    }
}
</style>